<template>
  <div class="input">
    <p>公园数量</p>
    <p>{{ Mapdatas.length }}</p>
  </div>
  <div id="container"></div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { parkMap } from '@/api/Park/park'
let map: any = null
const emit = defineEmits()
let Mapdatas = ref<any>([])
onMounted(() => {
  AMapLoader.load({
    key: 'c5031f421ee4d9ce394448b6c79db21a', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Geocoder'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map('container', {
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923] // 初始化地图中心点位置
      })

      var map = new AMap.Map('container', {
        resizeEnable: true
      })

      // var geocoder = new AMap.Geocoder({
      //   city: '010', //城市设为北京，默认：“全国”
      //   radius: 1000 //范围，默认：500
      // })
      // var marker = new AMap.Marker() //生成标记点对象
      parkMap().then((res) => {
        Mapdatas.value = res.data.results
        Mapdatas.value.forEach((e) => {
          var info = <any>[]
          info.push(`<div style=\"padding:7px 0px 0px 0px;\">
          <h4 style='color:green'>公园名称·：${e.name}</h4>
          <h4 style='color:green'>公园地址：${e.address}</h4>`)
          // console.log('2222',e.lng);=-.
          // console.log('3333', e.lat);
          const icon = new AMap.Icon({
            size: new AMap.Size(30, 30), // 图标尺寸
            // image: "../../assets/imgs/park.png",  // Icon的图像
            imageSize: new AMap.Size(30, 30) // 根据所设置的大小拉伸或压缩图片
          })
          //创建一个 Marker 实例：
          const marker = new AMap.Marker({
            position: [e.lng, e.lat], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            icon,
            title: e.address
          })
          map.add(marker)
          marker.on('click', function (e) {
            // marker提示信息
            var infoWindow = new AMap.InfoWindow({
              content: info.join('') //传入 dom 对象，或者 html 字符串
            })
            console.log('1111', infoWindow)
            infoWindow.open(map, e.target.getPosition())
          })
        })
      })

      // 地图点击事件
      // map.on("click", function (e: { lnglat: { lng: number; lat: number } }) {
      //   console.log(e);
      //   let { lng, lat } = e.lnglat;
      //   regeoCode([lng, lat]);
      // });
      // 根据经纬度，解析得到地理位置信息（逆地理编码）
      // function regeoCode(lnglat: [number, number]) {
      //   map.add(marker)
      //   marker.setPosition(lnglat) //向指定经纬度的位置显示marker点标记

      //   geocoder.getAddress(lnglat, function (status: any, result: any) {
      //     if (status === 'complete' && result.regeocode) {
      //       var address = result.regeocode.formattedAddress //讲adress交给父组件
      //       console.log(result)
      //       emit('update:modelValue', address)
      //     } else {
      //       console.log('根据经纬度查询地址失败')
      //     }
      //   })
      // }
    })
    .catch((e) => {
      console.log(e)
    })
})

onUnmounted(() => {
  map?.destroy()
})
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
}

.input {
  width: 100px;
  height: 60px;
  line-height: 30px;
  text-align: center;
  float: left;
  background: rgb(79, 116, 235);
}
</style>
